import React from 'react';
import {withRouter} from 'react-router-dom'
import { withStyles } from '@material-ui/core/styles';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import Button from '@material-ui/core/Button';
import Paper from '@material-ui/core/Paper'
import { Typography } from '@material-ui/core';

const styles = (theme) => ({
  root: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    margin: theme.spacing(2),
    padding: theme.spacing(1, 3, 1, 3),
  },
  formControl: {
    width: "100%",
    margin: theme.spacing(1),
  },
  submitButton: {
    margin: theme.spacing(1),
  },
  badge: {
    backgroundColor: theme.palette.info.main,
    color: "white",
  },
  buttonGroup: {
    display: "flex",
    alignItems: "center",
  }
});

class BlogFilter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      category: '',
      date: '',
      error: '',
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
  }

  handleChange(prop) {
    return (event) => {
      this.setState({ [prop]: event.target.value });
    }
  }

  handleFormSubmit(event) {
    // 需要处理成year和month的形式
    const res = this.state.date.match(/^(\d{4})-(\d{2})$/);
    const year = res ? res[1] : "";
    const month = res ? res[2] : "";
    const dateDiff = (year !== this.props.queryYear) || (month !== this.props.queryMonth);
    const categoryDiff = this.state.category !== this.props.queryCategory;
    if (!dateDiff && !categoryDiff) {
      this.setState({
        error: "请至少选择一个筛选项"
      });
    } else {
      this.setState({
        error: ""
      });
      this.props.onSubmit(this.state.category, year, month);
    }
  }

  renderCategorySelector() {
    const { classes } = this.props;
    const categoryItems = this.props.categories ? Object.entries(this.props.categories).map((item, index) => {
      const [category, { id, count }] = item;
      return (
        <MenuItem value={id} key={id}>
          {category}
        </MenuItem>
      );
    }) : null;
    return (
      <FormControl className={classes.formControl} error={Boolean(this.state.error)}>
        <InputLabel id="category-select-label">博客类别</InputLabel>
        <Select
          labelId="category-select-helper-label"
          id="category-select-helper"
          value={this.state.category}
          onChange={this.handleChange('category')}
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          {categoryItems}
        </Select>
        <FormHelperText>{this.state.error ? this.state.error : "选择你喜欢的类别"}</FormHelperText>
      </FormControl>
    );
  }

  renderDateSelector() {
    const { classes } = this.props;
    const dateItems = this.props.dates ? Object.entries(this.props.dates).map((item, index) => {
      const [date, num] = item;
      return (
        <MenuItem value={date} key={index}>
          {date}
        </MenuItem>
      );
    }) : null;
    return (
      <FormControl className={classes.formControl} error={Boolean(this.state.error)}>
        <InputLabel id="date-select-label">日期归档</InputLabel>
        <Select
          labelId="date-select-helper-label"
          id="date-select-helper"
          value={this.state.date}
          onChange={this.handleChange('date')}
          fullWidth
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          {dateItems}
        </Select>
        <FormHelperText>{this.state.error ? this.state.error : "选择感兴趣的日期"}</FormHelperText>
      </FormControl>
    )
  }

  renderAction() {
    const { classes } = this.props;
    return (
      <Button
        className={classes.submitButton}
        variant="contained"
        color="primary"
        onClick={this.handleFormSubmit}>
        给我筛
      </Button>
    )
  }

  render() {
    const { classes } = this.props;
    return (
      <Paper className={classes.root}>
        <Typography variant="h5">过滤器</Typography>
        {this.renderCategorySelector()}
        {this.renderDateSelector()}
        {this.renderAction()}
      </Paper>
    )
  }
}

export default withRouter(withStyles(styles, { withTheme: true })(BlogFilter));